﻿/**
 * Reset Global CSS
 * ------------------------------ */
h1,h2,h3,h4{margin:0.5em 0;font-weight:bold;font-size:30px;}
/*
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child{margin-top:0;}
*/
h1 em{padding-left:0.5em;font-size:18px;vertical-align:top;}
h2{font-size:24px;}
h3{font-size:18px;}
h4{font-size:16px;}

blockquote{margin:10px 0;padding:5px 8px;border:1px solid #ddd;background:#f3f3f3;color:#999;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
code{margin:0 3px;padding:0 5px;border:1px solid #ddd;border-radius:3px;background:#f8f8f8;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';}
pre{position:relative;margin:10px 0;padding:0;color:#333;word-wrap:break-word;}
pre code{display:block;position:relative;margin:0;padding:30px 20px 10px;border:1px solid #ddd;border-radius:3px;background:#f7f7f0;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
pre code:before{content:'Code Examples';position:absolute;top:10px;left:10px;color:#bbb;font:bold 12px/1 Arial;text-shadow:1px 1px 0 #fff;}
pre code.html:before{content:'HTML Code';}
pre code.css:before{content:'CSS Code';}
pre code.js:before{content:'JavaScript Code';}
pre code.php:before{content:'PHP Code';}
pre code ol{list-style:decimal inside;}
pre code.notitle{padding-top:10px;}
pre code.notitle:before{display:none;}

a,a:hover{color:#4a89dc;text-decoration:none;}
a:hover{text-decoration:underline;}


/**
 * Layout
 * ------------------------------ */
fieldset{margin:20px 0;padding:20px;border:1px solid #ccc;border-radius:5px;}
fieldset legend{margin-bottom:-10px;font:bold 14px/2 '\5fae\8f6f\96c5\9ed1';}
fieldset:first-child{margin-top:0;}


/**
 * 布局
 * ------------------------------ */
.wrap{position:relative;}
.wrap:after{visibility:hidden;display:block;font-size:0;content:'';clear:both;height:0;}
.side{float:left;width:240px;}
.side:before{content:'';position:absolute;top:0;left:0;width:240px;height:100%;background:#f5f7fa;box-shadow:3px 0 6px rgba(0,0,0,0.3);z-index:-1;}
.main{overflow:hidden;padding:0 30px 60px 30px;}


/**
 * Logo
 * ------------------------------ */
.logo{padding:10px;background-color:#4a89dc;color:#fff;font:bold 18px/30px Arial,'\5fae\8f6f\96c5\9ed1';}
.logo a{color:#fff;}
.logo a:hover{color:#e6e9ed;text-decoration:none;}
.logo em{padding-left:0.5em;font-size:14px;font-style:normal;vertical-align:top;}


/**
 * 关于
 * ------------------------------ */
.about{overflow:hidden;margin-bottom:20px;padding:10px;border-bottom:1px solid #ccd1d9;line-height:20px;}
.about dt{font:bold 18px/30px Arial,'\5fae\8f6f\96c5\9ed1';}
.about dd{float:left;}
.about dd + dd{margin-left:10px;padding-left:10px;border-left:1px solid #aab2bd;}
.about dd.br{clear:left;margin-top:10px;margin-left:0;padding:0;border-left:none;}
.about dd.br ~ dd{margin-top:10px;}


/**
 * 导航
 * ------------------------------ */
.nav{padding-bottom:100px;}
.nav dl{list-style-type:none;line-height:30px;}
.nav dl + dl{margin-top:10px;}
.nav dt{position:relative;padding-left:10px;font:bold 14px/30px Arial,'\5fae\8f6f\96c5\9ed1';}
.nav dd{border-top:1px solid #ccd1d9;}
.nav dd a{display:block;position:relative;padding:5px 0 5px 24px;line-height:20px;text-transform:capitalize;
/*transition:color 0.2s;*/
}
.nav dd a:before{content:'';position:absolute;top:15px;left:10px;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left-color:#f5f7fa;
/*transition:border-left-color 0.2s ease-out;*/
}
.nav dd a:after{content:attr(title);display:block;overflow:hidden;color:#aab2bd;font-size:12px;white-space:nowrap;text-overflow:ellipsis;
transition:color 0.2s ease-out;
}
.nav dd a:hover{color:#3bafda;text-decoration:none;}
.nav dd a:hover:before{border-left-color:#3bafda;}
.nav dd a:hover:after{color:#656d78;}
.nav dd.n{background:#e6e9ed;}
.nav dd.n a{color:#3bafda;}
.nav dd.n a:after{color:#656d78;}
.nav dd.n a:before{top:0;left:0;height:100%;margin:0;border:none;border-left:8px solid #3bafda;}

.nav dl.mini dd a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.nav dl.mini dd a:after{display:none;}

.example{position:relative;}
.example + .example{margin-top:40px;}
.example + .example:before{content:'';position:absolute;top:-20px;left:0;width:100%;height:1px;background-color:#ddd;}


/**
 * 表单
 * ------------------------------ */
.form_long dl.row dt{width:10em;}
.form_long dl.row dd{margin-left:11em;}


/**
 * highlight.js Theme
 * GitHub Gist Theme
 * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
 */
.hljs{display:block;overflow-x:auto;color:#333;}
.hljs-comment,
.hljs-meta{color:#969896;}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote{color:#df5000;}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type{color:#a71d5d;}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute{color:#0086b3;}
.hljs-section,
.hljs-name{color:#63a35c;}
.hljs-tag{color:#333;}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo{color:#795da3;}
.hljs-addition{color:#55a532;background-color:#eaffea;}
.hljs-deletion{color:#bd2c00;background-color:#ffecec;}
.hljs-link{text-decoration:underline;}